<template >
  <CustomComponent
    v-if="dropType == 1"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <span class="classIcon1-line"></span>
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 2"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <span class="classIcon1-line"></span>
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 3"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
    customTitleSub="class3Titlesub"
  >
    <template v-slot:arrow>
      <div class="classIcon3 classArrow">
        <span
          v-for="item in [3, 2, 1, 0]"
          :key="item"
          class="classIcon3Arrow"
          :style="{ width: 3 + item * 4 + 'px' }"
        ></span>
      </div>
    </template>
    <template v-slot:titleContext> </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 4"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
    customTitleSub="class4Titlesub"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 5"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
    customTitleSub="class5Titlesub"
    classIcon="class5Icon"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 6"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <div class="class6-decorate-top-left"></div>
      <div class="class6-decorate-top-right"></div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 7"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
    customTitleSub="class5Titlesub"
    classIcon="class5Icon"
  >
    <template v-slot:titleContext>
      <div class="class7-title-decorate-left">
        <div class="class7-title-decorate-line"></div>
        <div class="class7-title-decorate-dot"></div>
      </div>
      <div class="class7-title-decorate-right">
        <div class="class7-title-decorate-dot"></div>
        <div class="class7-title-decorate-line"></div>
      </div>
    </template>
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:otherDecorate>
      <div class="class7-icon-decorate-left">
        <div class="class7-icon-decorate-line"></div>
        <div class="class7-icon-decorate-dot"></div>
      </div>
      <div class="class7-icon-decorate-right">
        <div class="class7-icon-decorate-dot"></div>
        <div class="class7-icon-decorate-line"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 8"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <svg
        v-for="item in 4"
        :key="item"
        width="10"
        height="10"
        :class="['class8-svg', `class8-svg${item}`]"
      >
        <polyline
          points="6,0,0,0,0,6"
          style="stroke: #0c8990; stroke-width: 2; fill: transparent"
        ></polyline>
      </svg>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 9"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <span class="class9-circle1"></span>
      <span class="class9-circle2"></span>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 10"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <div class="class10-decorate-line-left"></div>
      <div class="class10-decorate-line-top"></div>
      <div class="class10-decorate-circle-left-top"></div>
      <div class="class10-decorate-circle-left-bottom"></div>
      <div class="class10-decorate-circle-right"></div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 11"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
    customTitleSub="class11Titlesub"
    classIcon="class11Icon"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <div class="class11-title-decorate-rect1"></div>
      <div class="class11-title-decorate-rect2"></div>
    </template>
    <template v-slot:otherDecorate>
      <div class="class11-icon-decorate-rect1"></div>
      <div class="class11-icon-decorate-rect2"></div>
      <div class="class11-icon-decorate-rect3"></div>
      <div class="class11-icon-decorate-rect4"></div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 12"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 13"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 14"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 15"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <img src="./img/class15-arrow.png" alt="" />
      </div>
    </template>
    <template v-slot:titleContext>
      <div class="class15-left-line"></div>
      <div class="class15-right-line"></div>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 16"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <span
        v-for="(item, index) in 4"
        :key="index"
        :class="`class16-rect-${item}`"
      ></span>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 17"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <span
        v-for="(item, index) in 3"
        :key="index"
        :class="`class17-rect-${item}`"
      ></span>
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 18"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:titleContext>
      <img src="./img/class18-decorate.png" alt="" class="class18-decorate" />
    </template>
  </CustomComponent>
  <CustomComponent
    v-else-if="dropType == 19"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:decorate>
      <div v-for="(item,index) in 4" :key="index" :class="`class19-decorate-${item}`"></div>
    </template>
  </CustomComponent>
    <CustomComponent
    v-else-if="dropType == 20"
    v-bind="$attrs"
    v-on="$listeners"
    :customIcon="false"
    :dropType="dropType"
  >
    <template v-slot:arrow>
      <div class="classIcon1 classArrow">
        <div class="classIcon1-arrow"></div>
      </div>
    </template>
    <template v-slot:decorate>
      <div v-for="(item,index) in 4" :key="index" :class="`class20-decorate-${item}`"></div>
    </template>
  </CustomComponent>
</template>
<script>
import Type6Polyline from "../data-v-title-panel/component/type6-polyline.vue";
import CustomComponent from "./custom-component.vue";

export default {
  name: "data-v-dropdown",
  components: {
    CustomComponent,
    Type6Polyline,
  },
  props: {
    dropType: {
      type: [Number, String],
      default: 1,
    },
  },
  mounted() {
    //console.log("qq", this);
  },
};
</script>
<style src='./index.css' scoped></style>
